layui.config({
    base: "/script/"
}).use(['flow', 'form', 'layer', 'upload'], function () {
    var flow = layui.flow,
        form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        upload = layui.upload,
        $ = layui.jquery;

    //流加载图片
    var imgNums = 15;  //单页显示图片数量
    var albumId = $('#albumId').val();
    flow.load({
        elem: '#Images', //流加载容器
        done: function (page, next) {
            //加载下一页
            $.ajax({
                type: "post",
                url: "/manage/albumimg/data",
                dataType: "json",
                data: {
                    id: albumId
                },
                success: function (res) {
                    var imgList = [], data = res.data;
                    var maxPage = imgNums * page < data.length ? imgNums * page : data.length;
                    setTimeout(function () {
                        for (var i = imgNums * (page - 1); i < maxPage; i++) {
                            imgList.push(
                                '<li>' +
                                '<img layer-src="/upload/album/images/' + data[i].src + '" ' +
                                '   src="/upload/album/images/' + data[i].thumb + '" ' +
                                '   alt="' + data[i].alt + '" style="width: 270px;height: 180px" align="center" >' +
                                '   <div class="operate">' +
                                '       <div class="check">' +
                                '           <input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="' + data[i].alt + '"/>' +
                                '       </div>' +
                                '       <i class="layui-icon img_del">&#xe640;</i>' +
                                '   </div>' +
                                '</li>');
                        }
                        next(imgList.join(''), page < (data.length / imgNums));
                        form.render();
                    }, 500);

                }, error: function () {
                    layer.msg("加载失败", {icon: 2});
                }
            });
        }
    });

    //设置图片的高度
    /* $(window).resize(function(){
         $("#Images li img").height($("#Images li img").width());
     })*/

    //多图片上传
    upload.render({
        elem: '.uploadNewImg',
        url: '/mamage/albumimg/uploadImg',
        data: {
            id: albumId
        },
        multiple: true,
        before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#Images').prepend('' +
                    '<li>' +
                    '   <img layer-src="' + result + '" src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width: 270px;height: 180px">' +
                    '   <div class="operate">' +
                    '       <div class="check">' +
                    '           <input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="' + file.name + '">' +
                    '       </div>' +
                    '       <i class="layui-icon img_del">&#xe640;</i>' +
                    '   </div>' +
                    '</li>');
                //设置图片的高度
                //$("#Images li img").height($("#Images li img").width());
                form.render("checkbox");
            });
        },
        done: function (res) {
            //上传完毕
            layer.msg("上传成功", {icon: 1});
        }
    });

    //删除单张图片
    $("body").on("click", ".img_del", function () {
        var _this = $(this);
        layer.confirm('确定删除图片"' + _this.siblings().find("input").attr("title") + '"吗？', {
            icon: 3,
            title: '提示信息'
        }, function (index) {
            _this.parents("li").hide(1000);
            setTimeout(function () {
                _this.parents("li").remove();
            }, 950);
            layer.close(index);

            var name = _this.siblings().find("input").attr("title");
            $.post("/manage/albumimg/delete", {
                name: name
            }, function (data) {
                data = JSON.parse(data);
                if (data.flag === "success") {
                    layer.msg("删除成功", {icon: 1});
                    tableIns.reload();
                    layer.close(index);
                } else {
                    layer.msg("删除失败！", {icon: 2});
                }
            });
        });
    });

    //全选
    form.on('checkbox(selectAll)', function (data) {
        var child = $("#Images li input[type='checkbox']");
        child.each(function (index, item) {
            item.checked = data.elem.checked;
        });
        form.render('checkbox');
    });

    //通过判断是否全部选中来确定全选按钮是否选中
    form.on("checkbox(choose)", function (data) {
        var child = $(data.elem).parents('#Images').find('li input[type="checkbox"]');
        var childChecked = $(data.elem).parents('#Images').find('li input[type="checkbox"]:checked');
        if (childChecked.length == child.length) {
            $(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = true;
        } else {
            $(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = false;
        }
        form.render('checkbox');
    });

    //批量删除
    $(".batchDel").click(function () {
        var $checkbox = $('#Images li input[type="checkbox"]');
        var $checked = $('#Images li input[type="checkbox"]:checked');
        if ($checkbox.is(":checked")) {
            layer.confirm('确定删除选中的图片？', {icon: 3, title: '提示信息'}, function (index) {
                var index = layer.msg('删除中，请稍候', {icon: 16, time: false, shade: 0.8});
                setTimeout(function () {
                    //删除数据
                    $checked.each(function () {
                        var name = $(this).parents("li").find("input").attr("title");
                        $.post("/manage/albumimg/delete", {
                            name: name
                        }, function (data) {});
                    });

                    $checked.each(function () {
                        $(this).parents("li").hide(1000);
                        setTimeout(function () {
                            $(this).parents("li").remove();
                        }, 950);
                    });
                    $('#Images li input[type="checkbox"],#selectAll').prop("checked", false);
                    form.render();
                    layer.close(index);
                    layer.msg("删除成功");
                }, 2000);
            })
        } else {
            layer.msg("请选择需要删除的图片",{icon:7});
        }
    })

});